<div class="table-title">
    <table cellpadding="0" cellspacing="0" class="cats-table">
        <colgroup>
            <col width="5%">
            <col width="2%">
            <col width="48%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
        </colgroup>
        <tbody>
        <tr class="table-title">
            <td class="td-4">&nbsp;&nbsp;&nbsp;排序</td>
            <td class="td-00">&nbsp;</td>
            <td class="td-1">分类名称 <a class="add-cat main-add" title="增加主分类" href="{:U('Category/add',array('pid'=>0))}"> <i class="fa fa-plus"></i></a></td>
            <td class="td-2">分类图片</td>
            <td class="td-3">默认展开</td>
            <td class="td-timeh">创建时间</td>
            <td class="td-9">操作</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="table-outer">
    <form action="{:U('Category/update')}" method="POST">
        <table cellpadding="0" cellspacing="0" class="table table-hover">
            <colgroup>
                <col width="5%">
                <col width="2%">
                <col width="48%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
            </colgroup>


            <volist name="info" id="category">
                <tbody class="">
                    <tr class="cat-sup" data-level="1" data-id="{$category.id}" data-pid="{$category.pid}">
                        <td class="td-sort">
                            <input type="number" readonly="readonly" name="category[{$category.id}][sort]" value="{$category.sort}">
                        </td>
                        <td class="td-00"><input type="checkbox"></td>
                        <td class="td-title">
                            <input type="text" class="" name="category[{$category.id}][title]" readonly="readonly" value="<if condition="isset($category['title'])">{$category.title}</if>" maxlength="20"> <a class="add-cat sub-add" title="增加子分类" href="{:U('Category/add',array('pid'=>$category['id']))}"><i class="fa fa-plus"></i></a>
                        </td>
                        <td class="td-pic">
                            <input type="hidden" class="" value="" disabled="true">
                            <!--<a href="#" class="add-pic"><i class="fa fa-file-picture-o"></i></a>-->
                            <img src="{:get_cover($category['cover_id'],'path')}" width="25" height="25" onerror="this.src='__IMG__/class-logo.png'">
                        </td>
                        <td class="td-expand">
                            <input type="checkbox" class="">
                        </td>
                        <td class="td-time">
                            2015-03-21
                        </td>
                        <td class="td-operation">
                            <a class="cat-edit" title="编辑" href="{:U('Category/edit',array('id'=>$category['id']))}"><i class="fa fa-edit"></i></a>
                            <a title="查看该分类商品" href="{:U('Goods/index',array('category_id'=>$category['id']))}" target="_blank"><i class="fa fa-eye"></i></a>
                            <a class="cat-dele" title="删除" href="{:U('Category/delete',array('id'=>$category['id']))}"><i class="fa fa-trash"></i></a>
                        </td>
                        <td class="hidden" hidden="hidden">
                            <input name="category[{$category.id}][id]" value="{$category.id}">
                            <input name="category[{$category.id}][pid]" value="{$category.pid}">
                        </td>
                    </tr>
                    <if condition="is_array($category['child'])">
                        <volist name="category.child" id="child">
                            <tr class="cat-sub" data-level="2" data-id="{$child.id}" data-pid="{$child.pid}">
                                <td class="td-sort">
                                    <input type="number" readonly="readonly" name="category[{$child.id}][sort]" value="{$child.sort}">
                                </td>
                                <td class="td-00"><input type="checkbox"></td>
                                <td class="td-title">
                                    <i style="padding: 0px 12px;"></i><canvas class="myCanvas" width="35px" height="21px">您的浏览器不支持canvas标签。</canvas> <input type="text" class="" name="category[{$child.id}][title]" readonly="readonly"  value="<if condition="isset($child['title'])">{$child.title}</if>" maxlength="20"> <a class="add-cat sub-add" title="增加子分类"><i class="fa fa-plus"></i></a>
                                </td>
                                <td class="td-pic">
                                    <input type="hidden" class="" value="" disabled="true">
                                    <!--<a href="#" class="add-pic"><i class="fa fa-file-picture-o"></i></a>-->
                                    <img src="{:get_cover($child['cover_id'],'path')}" width="25" height="25" onerror="this.src='__IMG__/class-logo.png'">
                                </td>
                                <td class="td-expand">
                                    <input type="checkbox" class="">
                                </td>
                                <td class="td-time">
                                    2015-03-21
                                </td>
                                <td class="td-operation">
                                    <a class="cat-edit" title="编辑" href="{:U('Category/edit',array('id'=>$child['id']))}"><i class="fa fa-edit"></i></a>
                                    <a title="查看该分类商品" href="{:U('Goods/index',array('category_id'=>$child['id']))}" target="_blank"><i class="fa fa-eye"></i></a>
                                    <a class="cat-dele" title="删除" href="{:U('Category/delete',array('id'=>$child['id']))}"><i class="fa fa-trash"></i></a>
                                </td>
                                <td class="hidden" hidden="hidden">
                                    <input name="category[{$child.id}][id]" value="{$child.id}">
                                    <input name="category[{$child.id}][pid]" value="{$child.pid}">
                                </td>
                            </tr>
                            <if condition="is_array($child['child'])">
                                <volist name="child.child" id="child_2">
                                    <tr class="cat-sub" data-level="2" data-id="{$child_2.id}" data-pid="{$child_2.pid}">
                                        <td class="td-sort">
                                            <input type="number" readonly="readonly" name="category[{$child_2.id}][sort]" value="{$child_2.sort}">
                                        </td>
                                        <td class="td-00"><input type="checkbox"></td>
                                        <td class="td-title">
                                            <i style="padding: 0px 32px;"></i><canvas class="myCanvas" width="35px" height="21px">您的浏览器不支持canvas标签。</canvas> <input type="text" class="" name="category[{$child_2.id}][title]" readonly="readonly" value="<if condition="isset($child_2['title'])">{$child_2.title}</if>" maxlength="20"> <a class="add-cat sub-add" title="增加子分类"><i class="fa fa-plus"></i></a>
                                        </td>
                                        <td class="td-pic">
                                            <input type="hidden" class="" value="" disabled="true">
                                            <!--<a href="#" class="add-pic"><i class="fa fa-file-picture-o"></i></a>-->
                                            <img src="{:get_cover($child_2['cover_id'],'path')}" width="25" height="25" onerror="this.src='__IMG__/class-logo.png'">
                                        </td>
                                        <td class="td-expand">
                                            <input type="checkbox" class="">
                                        </td>
                                        <td class="td-time">
                                            2015-03-21
                                        </td>
                                        <td class="td-operation">
                                            <a class="cat-edit" title="编辑" href="{:U('Category/edit',array('id'=>$child_2['id']))}"><i class="fa fa-edit"></i></a>
                                            <a title="查看该分类商品" href="{:U('Goods/index',array('category_id'=>$child_2['id']))}" target="_blank"><i class="fa fa-eye"></i></a>
                                            <a class="cat-dele" title="删除" href="{:U('Category/delete',array('id'=>$child_2['id']))}"><i class="fa fa-trash"></i></a>
                                        </td>
                                        <td class="hidden" hidden="hidden">
                                            <input name="category[{$child_2.id}][id]" value="{$child_2.id}">
                                            <input name="category[{$child_2.id}][pid]" value="{$child_2.pid}">
                                        </td>
                                    </tr>
                                </volist>
                            </if>
                        </volist>
                    </if>

                </tbody>
            </volist>

    </table>
        <button class="btn btn-default" type="submit">提交</button>
    </form>
</div>




<script type="application/javascript">

    window.onload = canvas_fn;
    function canvas_fn(){
        //获取Canvas对象(画布)
        var canva_arr = document.getElementsByClassName("myCanvas");
        for(var i=0; i<canva_arr.length; i++){
            var ctx = canva_arr[i].getContext( '2d' );
            ctx.beginPath();
            ctx.moveTo(1,15);
            ctx.lineTo(1,15);
            ctx.lineTo(35,15);
            ctx.stroke();
            ctx.closePath();
        }
    }

    $(function(){

        //删除分类
//        $(document).on('click','a.cat-dele',function(){
//            var that    =   $(this).parent("td").parent('tr');
//            trace(that);
//            var list = $(".table-outer table tbody");
//            for(var i=0; i<list.length; i++){
//                var tr = $(list[i]).children("tr");
//                for(var j=0; j<tr.length; j++){
//
//                }
//            }
//
//            $(that).hide();
//            $(that).find()
//        });
//
//        //增加子分类
//        $(document).on('click','a.sub-add',function(){
//            var that    =   $(this).parent("td.td-title").parent("tr");
//            var pid = $(that).attr('data-id');
//            var id = getLastCate(pid);
//            trace('pid ='+pid);
//            trace('点击了 sub-add level='+$(that).attr('data-level'));
//            var tr  =   $('<tr></tr>');
//            var lev =   parseInt($(that).attr('data-level'))+1;
//            var pad =   20*lev-28;
//            trace('lev='+ lev);
//            trace('pad='+ pad);
//            var str =   '<td class="td-sort"> <input type="number" name=""> </td> <td class="td-00"><input type="checkbox"></td> <td class="td-title"><i style="padding:0 32px"></i><canvas class="myCanvas" width="35px" height="21px">您的浏览器不支持canvas标签。</canvas> <input type="text" class="" value="" maxlength="20"> <a class="add-cat sub-add" title="增加子分类"><i class="fa fa-plus"></i></a> </td> <td class="td-pic"> <input type="hidden" class="" value="" disabled="true"> <a href="#" class="add-pic"><i class="fa fa-file-picture-o"></i></a> </td> <td class="td-expand"> <input type="checkbox" class=""> </td> <td class="td-time">今天</td> <td class="td-operation"> <a class="">删除</a> <a href="" target="_blank">查看</a> </td>';
//            $(tr).html(str);
//            var td  =   $('<td class="hidden" hidden="hidden"></td>');
//            $(td).append($('<input>').attr('name','category['+id+'][id]').attr('value',id));
//            $(td).append($('<input>').attr('name','category['+id+'][pid]').attr('value',pid));
//            $(tr).addClass('cat-sub').attr('data-level',lev).attr('data-id',id);
//            $(tr).children("td.td-title").children("input").attr('name','category['+id+'][title]');
//            $(tr).children("td.td-sort").children("input").attr('name','category['+id+'][sort]');
//            $(tr).children('td.td-title').children('i').css({"padding-left":(pad+'px'),"padding-right":(pad+'px')});
//            $(tr).append($(td));
//            $(that).after(tr);
//            canvas_fn()
//        });
//
//        //增加主分类
//        $(document).on('click','a.main-add',function(){
//            var pid = 0;
//            var id = getLastCate(pid);
//            trace('01 id='+id);
//            //return;
//            var that    =   $(".table-outer>table>tbody>tr:last-child");
//            trace('点击了 sub-add level='+$(that).attr('data-level'));
//            var tbody  =   $('<tbody></tbody>');
//            var lev =   1;
//            var str =   '<tr><td class="td-sort"> <input type="number" > </td> <td class="td-00"><input type="checkbox"></td> <td class="td-title"><i class="fa fa-chevron-right i-expend"></i><input type="text" maxlength="20"> <a class="add-cat sub-add" title="增加子分类"><i class="fa fa-plus"></i></a> </td> <td class="td-pic"> <input type="hidden" class="" value="" disabled="true"> <a href="#" class="add-pic"><i class="fa fa-file-picture-o"></i></a> </td> <td class="td-expand"> <input type="checkbox" class=""> </td> <td class="td-time">今天</td> <td class="td-operation"> <a class="">删除</a> <a href="" target="_blank">查看</a> </td></tr>';
//            $(tbody).html(str);
//            $(tbody).addClass("expand");
//            var tr = $(tbody).children("tr:first-child");
//            $(tr).addClass('cat-sup').attr('data-level',lev).attr('data-id',id);
//            $(tr).find("td.td-title input").attr('name','category['+id+'][title]');
//            $(tr).find("td.td-sort input").attr('name','category['+id+'][sort]');
//            var td  =   $('<td class="hidden" hidden="hidden"></td>');
//            $(td).append($('<input>').attr('name','category['+id+'][id]').attr('value',id));
//            $(td).append($('<input>').attr('name','category['+id+'][pid]').attr('value',pid));
//            $(tr).append($(td));
//            trace(tbody);
//
//            $(".table-outer table>tbody:last-child").after(tbody);
//            canvas_fn()
//        });
//        $(document).on('click','a.main-add',function(){
//            trace('点击了main-add');
//        });
        //折叠按钮
        $(document).on('click','i.i-expend',function(){
            var tbody  =   $(this).parent("td.td-title").parent("tr").parent("tbody"); //当前tr元素
            if($(tbody).hasClass("expand")){
                $(tbody).removeClass("expand");
                $(this).addClass("fa-chevron-down").removeClass("fa-chevron-right");
            }else{
                $(tbody).addClass("expand");
                $(this).removeClass("fa-chevron-down").addClass("fa-chevron-right");
            }
        });
        function getLastCate(pid){
//            var list = $(".table-outer table tbody");
//            //trace(list.length);
//            var max_id = 0;
//            for(var i=0; i<list.length; i++){
//                var tr = $(list[i]).children("tr");
//                for(var j=0; j<tr.length; j++){
//                    //trace(tr[j]);
//                    //trace($(tr[j]).attr("data-id"));
//                    max_id = (max_id>parseInt($(tr[j]).attr("data-id"))) ? max_id : parseInt($(tr[j]).attr("data-id")) ;
//                }
//            }
//            //trace('max_id='+max_id);
//            return max_id;
            var id = 0;
            $.post('{:U("Category/getLast")}',{pid:pid},function(data){
                trace(data);
                trace('data.id='+data.id);
                if(data.id>0){
                    return data.id;
                }
                trace('id='+data.id);
            });
        }
    });
</script>